<template>
  <div class="plan-list-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">
          战术方案管理
        </h1>
      </div>
      <div class="header-actions">
        <el-button type="success" icon="Plus">
          创建方案
        </el-button>
        <el-button type="primary" icon="Upload">
          导入方案
        </el-button>
        <el-button type="success" icon="VideoPlay">
          快速演示
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="summary-cards">
      <div class="summary-card">
        <div class="card-content">
          <div class="card-value">32</div>
          <div class="card-label">方案总数</div>
        </div>
      </div>
      <div class="summary-card">
        <div class="card-content">
          <div class="card-value">24</div>
          <div class="card-label">活跃方案</div>
        </div>
      </div>
      <div class="summary-card">
        <div class="card-content">
          <div class="card-value">186</div>
          <div class="card-label">成功推演</div>
        </div>
      </div>
      <div class="summary-card">
        <div class="card-content">
          <div class="card-value">89%</div>
          <div class="card-label">平均成功率</div>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <el-card class="search-card">
      <div class="search-section">
        <div class="search-filters">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索方案名称..."
            prefix-icon="Search"
            clearable
            class="search-input"
          />
          <el-select v-model="selectedType" placeholder="全部类型" clearable class="filter-select">
            <el-option label="全部类型" value="" />
            <el-option label="渗透测试" value="penetration" />
            <el-option label="防御演练" value="defense" />
            <el-option label="应急响应" value="emergency" />
            <el-option label="综合推演" value="integrated" />
        </el-select>
          <el-select v-model="selectedStatus" placeholder="全部状态" clearable class="filter-select">
            <el-option label="全部状态" value="" />
            <el-option label="活跃" value="active" />
            <el-option label="草稿" value="draft" />
            <el-option label="暂停" value="paused" />
            <el-option label="完成" value="completed" />
        </el-select>
        </div>
        <div class="view-toggles">
          <el-button 
            size="small" 
            :type="viewMode === 'grid' ? 'primary' : ''" 
            icon="Grid" 
            @click="switchViewMode('grid')"
          />
          <el-button 
            size="small" 
            :type="viewMode === 'list' ? 'primary' : ''" 
            icon="List" 
            @click="switchViewMode('list')"
          />
        </div>
      </div>
    </el-card>

    <!-- 方案展示区域 -->
    <!-- 卡片网格视图 -->
    <div v-if="viewMode === 'grid'" class="plan-grid">
      <div class="plan-card" v-for="plan in filteredPlans" :key="plan.id">
        <div class="card-header">
          <div class="plan-title">
            <el-icon :class="plan.iconClass"><component :is="plan.icon" /></el-icon>
            <span>{{ plan.name }}</span>
          </div>
          <el-tag :type="getStatusTagType(plan.status)" size="small">
            {{ getStatusName(plan.status) }}
          </el-tag>
        </div>
        
        <div class="card-content">
          <div class="target-topology">
            <el-icon :class="plan.topologyIconClass"><component :is="plan.topologyIcon" /></el-icon>
            <span>{{ plan.targetTopology }}</span>
          </div>
          
          <div class="attack-flow">
            <div class="flow-steps">
              <div class="flow-step" v-for="(step, index) in plan.attackFlow" :key="index">
                <div class="step-box">{{ step }}</div>
                <div class="step-arrow" v-if="index < plan.attackFlow.length - 1">→</div>
              </div>
            </div>
          </div>
          
          <div class="plan-details">
            <div class="detail-item">
              <span class="label">目标拓扑:</span>
              <span class="value">{{ plan.targetTopology }}</span>
            </div>
            <div class="detail-item">
              <span class="label">攻击步骤:</span>
              <span class="value">{{ plan.attackSteps }}步</span>
            </div>
            <div class="detail-item">
              <span class="label">成功率:</span>
              <span class="value success-rate">{{ plan.successRate }}%</span>
            </div>
            <div class="detail-item">
              <span class="label">推演次数:</span>
              <span class="value simulation-count">{{ plan.simulationCount }}次</span>
            </div>
            <div class="detail-item">
              <span class="label">创建时间:</span>
              <span class="value">{{ plan.createTime }}</span>
            </div>
          </div>
        </div>
        
        <div class="card-actions">
          <el-button type="primary" size="small">预览</el-button>
          <el-button type="warning" size="small">编辑</el-button>
          <el-button type="success" size="small">执行</el-button>
        </div>
      </div>
    </div>

    <!-- 列表视图 -->
    <div v-if="viewMode === 'list'" class="plan-list">
      <el-card class="list-card">
        <template #header>
          <div class="card-header">
            <span>战术方案列表</span>
          </div>
        </template>
        <el-table :data="filteredPlans" style="width: 100%" stripe>
          <el-table-column type="selection" width="55" />
          <el-table-column label="方案名称" min-width="200">
            <template #default="{ row }">
              <div class="plan-name-cell">
                <el-icon :class="row.iconClass"><component :is="row.icon" /></el-icon>
                <span>{{ row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="类型" width="120" align="center">
            <template #default="{ row }">
              <el-tag :type="getTypeTagType(row.type)" size="small">
                {{ getTypeName(row.type) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="目标拓扑" width="150" align="center">
            <template #default="{ row }">
              <span>{{ row.targetTopology }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.status)" size="small">
                {{ getStatusName(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="攻击步骤" width="100" align="center">
            <template #default="{ row }">
              <span>{{ row.attackSteps }}步</span>
            </template>
          </el-table-column>
          <el-table-column label="成功率" width="100" align="center">
            <template #default="{ row }">
              <div class="success-rate-box" :class="getSuccessRateClass(row.successRate)">
                {{ row.successRate }}%
              </div>
            </template>
          </el-table-column>
          <el-table-column label="推演次数" width="100" align="center">
            <template #default="{ row }">
              <span>{{ row.simulationCount }}次</span>
            </template>
          </el-table-column>
          <el-table-column label="创建人" width="120" align="center">
            <template #default="{ row }">
              <span>{{ row.creator }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="160" align="center">
        <template #default="{ row }">
              <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
          <el-table-column label="操作" width="160" align="center" fixed="right">
        <template #default="{ row }">
              <div class="action-buttons">
                <el-button type="primary" :icon="View" circle size="small" title="预览" />
                <el-button type="warning" :icon="Edit" circle size="small" title="编辑" />
                <el-button type="success" :icon="VideoPlay" circle size="small" title="执行" />
                <el-button type="danger" :icon="Delete" circle size="small" title="删除" />
              </div>
        </template>
      </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50]"
            :total="totalItems"
            layout="total, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Grid, Plus, Upload, VideoPlay, Search, Lightning, Van, Warning, House, View, Edit, Delete } from '@element-plus/icons-vue'

// 搜索和筛选数据
const searchKeyword = ref('')
const selectedType = ref('')
const selectedStatus = ref('')

// 视图模式
const viewMode = ref('grid') // 'grid' 或 'list'

// 分页数据
const currentPage = ref(1)
const pageSize = ref(10)
const totalItems = ref(4)

// 方案数据
const plans = ref([
  {
    id: 1,
    name: '渗透测试方案A',
    type: 'penetration',
    status: 'active',
    targetTopology: '电力配电系统',
    attackFlow: ['网络扫描', '漏洞利用', '权限提升', '数据窃取'],
    attackSteps: 5,
    successRate: 92,
    simulationCount: 28,
    creator: '张工程师',
    createTime: '2024-06-01 10:30',
    icon: 'Lightning',
    iconClass: 'penetration-icon',
    topologyIcon: 'Lightning',
    topologyIconClass: 'topology-lightning'
  },
  {
    id: 2,
    name: '航电系统防御演练',
    type: 'defense',
    status: 'active',
    targetTopology: '航电综合测试',
    attackFlow: ['防护检测', '入侵模拟', '应急响应', '恢复验证'],
    attackSteps: 6,
    successRate: 87,
    simulationCount: 15,
    creator: '李工程师',
    createTime: '2024-05-28 15:45',
    icon: 'Van',
    iconClass: 'avionics-icon',
    topologyIcon: 'Van',
    topologyIconClass: 'topology-avionics'
  },
  {
    id: 3,
    name: '机车系统综合推演',
    type: 'integrated',
    status: 'draft',
    targetTopology: '机车信号控制',
    attackFlow: ['信号劫持', '协议分析', '控制篡改', '安全检测'],
    attackSteps: 4,
    successRate: 75,
    simulationCount: 3,
    creator: '王工程师',
    createTime: '2024-05-25 09:20',
    icon: 'Van',
    iconClass: 'locomotive-icon',
    topologyIcon: 'Van',
    topologyIconClass: 'topology-locomotive'
  },
  {
    id: 4,
    name: '应急响应演练',
    type: 'emergency',
    status: 'active',
    targetTopology: '装备制造生产线',
    attackFlow: ['威胁检测', '隔离处置', '恢复操作', '验证测试'],
    attackSteps: 4,
    successRate: 98,
    simulationCount: 42,
    creator: '赵工程师',
    createTime: '2024-05-20 09:05',
    icon: 'Warning',
    iconClass: 'emergency-icon',
    topologyIcon: 'House',
    topologyIconClass: 'topology-manufacturing'
  }
])

// 过滤后的方案列表
const filteredPlans = computed(() => {
  return plans.value.filter(plan => {
    const matchesKeyword = !searchKeyword.value || 
      plan.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      plan.targetTopology.toLowerCase().includes(searchKeyword.value.toLowerCase())
    
    const matchesType = !selectedType.value || plan.type === selectedType.value
    const matchesStatus = !selectedStatus.value || plan.status === selectedStatus.value
    
    return matchesKeyword && matchesType && matchesStatus
  })
})

// 获取状态标签类型
const getStatusTagType = (status) => {
  const statusMap = {
    'active': 'success',
    'draft': 'info',
    'paused': 'warning',
    'completed': 'primary'
  }
  return statusMap[status] || 'info'
}

// 获取状态名称
const getStatusName = (status) => {
  const statusMap = {
    'active': '活跃',
    'draft': '草稿',
    'paused': '暂停',
    'completed': '完成'
  }
  return statusMap[status] || status
}

// 获取类型标签类型
const getTypeTagType = (type) => {
  const typeMap = {
    'penetration': 'success',
    'defense': 'info',
    'emergency': 'danger',
    'integrated': 'warning'
  }
  return typeMap[type] || 'info'
}

// 获取类型名称
const getTypeName = (type) => {
  const typeMap = {
    'penetration': '渗透测试',
    'defense': '防御演练',
    'emergency': '应急响应',
    'integrated': '综合推演'
  }
  return typeMap[type] || type
}

// 获取成功率类名
const getSuccessRateClass = (rate) => {
  if (rate >= 90) return 'success-rate-high'
  if (rate >= 70) return 'success-rate-medium'
  return 'success-rate-low'
}

// 切换视图模式
const switchViewMode = (mode) => {
  viewMode.value = mode
}

// 处理每页显示条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1 // 当每页显示条数改变时，重置当前页为1
}

// 处理当前页变化
const handleCurrentChange = (val) => {
  currentPage.value = val
}

onMounted(() => {
  console.log('战术方案列表页面已加载')
})
</script>

<style lang="scss" scoped>
.plan-list-container {
  min-height: calc(100vh - 50px);
}

  .header-left {
    .page-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      color: var(--text-color);
      font-size: 28px;
      font-weight: 600;
      
      .el-icon {
        font-size: 24px;
        color: var(--el-color-primary);
      }
    }
  }
  
  .header-actions {
    display: flex;
    gap: 12px;
  }


.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
  
  .summary-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: 8px;
    padding: 20px;
    
    .card-content {
      text-align: center;
      
      .card-value {
        font-size: 32px;
        font-weight: bold;
        color: var(--el-color-primary);
        line-height: 1;
        margin-bottom: 8px;
      }
      
      .card-label {
        font-size: 14px;
        color: var(--text-color-secondary);
      }
    }
  }
}

.search-card {
  margin-bottom: 30px;
  
  .search-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .search-filters {
      display: flex;
      gap: 15px;
      flex: 1;
      
      .search-input {
        width: 300px;
      }
      
      .filter-select {
        width: 150px;
      }
    }
    
    .view-toggles {
      display: flex;
      gap: 8px;
    }
  }
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
  
  .plan-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 15px;
      
      .plan-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--text-color);
        font-size: 16px;
        
        .el-icon {
          font-size: 18px;
          
          &.penetration-icon { color: #f56c6c; }
          &.avionics-icon { color: #409eff; }
          &.locomotive-icon { color: #909399; }
          &.emergency-icon { color: #e6a23c; }
        }
      }
    }
    
    .card-content {
      .target-topology {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 15px;
        font-size: 14px;
        color: var(--text-color-secondary);
        
        .el-icon {
          font-size: 16px;
          
          &.topology-lightning { color: #e6a23c; }
          &.topology-avionics { color: #409eff; }
          &.topology-locomotive { color: #909399; }
          &.topology-manufacturing { color: #909399; }
        }
      }
      
      .attack-flow {
        margin-bottom: 15px;
        
        .flow-steps {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 8px;
          
          .flow-step {
            display: flex;
            align-items: center;
            
            .step-box {
              background: var(--el-color-primary);
              color: white;
              padding: 4px 8px;
              border-radius: 4px;
              font-size: 12px;
              white-space: nowrap;
            }
            
            .step-arrow {
              color: var(--el-color-primary);
              font-weight: bold;
              margin: 0 4px;
            }
          }
        }
      }
      
      .plan-details {
        .detail-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 6px;
          font-size: 13px;
          
          .label {
            color: var(--text-color-secondary);
          }
          
          .value {
            color: var(--text-color);
            
            &.success-rate {
              color: #67c23a;
              font-weight: 600;
            }
            
            &.simulation-count {
              color: #409eff;
              font-weight: 600;
            }
          }
        }
      }
    }
    
    .card-actions {
      display: flex;
      gap: 8px;
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid var(--el-border-color-lighter);
    }
     }
 }
 
 .plan-list {
   .list-card {
     background: var(--card-bg);
     border: var(--card-border);
     
     .card-header {
       font-weight: 600;
       color: var(--text-color);
     }
     
     .plan-name-cell {
       display: flex;
       align-items: center;
       gap: 8px;
       
       .el-icon {
         font-size: 16px;
         
         &.penetration-icon { color: #f56c6c; }
         &.avionics-icon { color: #409eff; }
         &.locomotive-icon { color: #909399; }
         &.emergency-icon { color: #e6a23c; }
       }
     }
     
     .success-rate-box {
       display: inline-block;
       padding: 2px 8px;
       border-radius: 4px;
       font-size: 12px;
       font-weight: 600;
       
       &.success-rate-high {
         background-color: #f0f9ff;
         color: #67c23a;
         border: 1px solid #c2e7b0;
       }
       
       &.success-rate-medium {
         background-color: #fef7e0;
         color: #e6a23c;
         border: 1px solid #f5dab1;
       }
       
       &.success-rate-low {
         background-color: #fef0f0;
         color: #f56c6c;
         border: 1px solid #fbc4c4;
       }
     }
     
     .action-buttons {
       display: flex;
       gap: 4px;
       justify-content: center;
       
       .el-button {
         width: 28px;
         height: 28px;
       }
     }
     
     .pagination-wrapper {
      display: flex;
      justify-content: flex-end;
       margin-top: 20px;
       padding-top: 20px;
       border-top: 1px solid var(--el-border-color-lighter);
     }
   }
 }
 
 // 响应式适配
@media (max-width: 1200px) {
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .plan-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
}

@media (max-width: 768px) {
  .summary-cards {
    grid-template-columns: 1fr;
  }
  
  .plan-grid {
    grid-template-columns: 1fr;
  }
  
  .search-section {
    flex-direction: column;
    gap: 15px;
    
    .search-filters {
      flex-direction: column;
      
      .search-input,
      .filter-select {
        width: 100%;
      }
    }
  }
}
</style>